<div class="ml-2">
  <div>
    <img
      src="assets/img/icons/graph/cloud.svg"
      aria-label="External"
      alt="External"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.EXTERNAL' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/domain.svg"
      aria-label="Namespace"
      style="width: 24px; height: 24px"
      alt="Namespace" />
    <span class="mx-1 text-muted">{{ 'network.legend.DOMAIN' | translate }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/cluster-d.svg"
      aria-label="Group"
      style="width: 24px; height: 24px"
      alt="Group Discover" />
    <span class="mx-1 text-muted">{{
      'network.legend.GROUP_DISCOVER' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/cluster-m.svg"
      aria-label="Group"
      style="width: 24px; height: 24px"
      alt="Group Monitor" />
    <span class="mx-1 text-muted">{{
      'network.legend.GROUP_MONITOR' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/cluster-p.svg"
      aria-label="Group"
      alt="Group Protect"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.GROUP_PROTECT' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/host-d.svg"
      aria-label="Node"
      alt="Node Discover"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.HOST_DISCOVER' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/host-m.svg"
      aria-label="Node"
      alt="Node Monitor"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.HOST_MONITOR' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/host-p.svg"
      aria-label="Node"
      alt="Node Protect"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.HOST_PROTECT' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/host.svg"
      aria-label="Unmanaged Node"
      alt="Unmanaged Node"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.IP_HOST' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/container-d.svg"
      aria-label="Container"
      alt="Container Discover"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_DISCOVER' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/container-m.svg"
      aria-label="Container"
      alt="Container Monitor"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_MONITOR' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/container-p.svg"
      aria-label="Container"
      alt="Container Protect"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_PROTECT' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/container-x.svg"
      aria-label="Unmanaged Container"
      alt="Unmanaged Container"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.WORKLOAD' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/serviceMesh-d.svg"
      aria-label="Service Mesh"
      alt="Service Mesh"
      style="width: 24px; height: 24px" />

    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_PROXY_DISCOVER' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/serviceMesh-m.svg"
      aria-label="Service Mesh"
      alt="Service Mesh Monitor"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_PROXY_MONITOR' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/serviceMesh-p.svg"
      aria-label="Service Mesh"
      alt="Service Mesh Protect"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.CONTAINER_PROXY_PROTECT' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/service.svg"
      aria-label="IP Service"
      alt="IP Service"
      style="width: 24px; height: 24px" />
    <span class="mx-1 text-muted">{{
      'network.legend.IP_GROUP' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/circle.svg"
      aria-label="Quarantined"
      alt="Quarantined"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1" >{{
      'network.legend.QUARANTINED' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/circle-q.svg"
      aria-label="Quarantined inside"
      alt="Quarantined inside"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1" >{{
      'network.legend.QUARANTINED_GROUP' | translate
      }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/circle-r.svg"
      aria-label="Risky Pod"
      alt="Risky Pod"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1" >{{
      'network.legend.RISKY_POD' | translate
      }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/rightArrowInternal.svg"
      aria-label="Internal Traffic"
      alt="Internal Traffic"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1" >{{
      'network.legend.CONV_INTERNAL' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/rightArrowInfo.svg"
      aria-label="Traffic"
      alt="Traffic"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1">{{
      'network.legend.CONV' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/rightArrowWarning.svg"
      aria-label="Warning Traffic"
      alt="Warning Traffic"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1">{{
      'network.legend.CONV_ALERT' | translate
    }}</span>
  </div>
  <div>
    <img
      src="assets/img/icons/graph/rightArrowDanger.svg"
      aria-label="Dangerous Traffic"
      alt="Dangerous Traffic"
      style="width: 24px; height: 24px" />
    <span class="text-muted mx-1">{{
      'network.legend.CONV_DENY' | translate
    }}</span>
  </div>
</div>
